import React, { useEffect, useState } from 'react'

export default function App() {

    const [banner, setBanner] = useState([])

    /*
        useEffect 有两个参数
        第一个参数：是一个回调函数，该函数会在组件挂载、更新时执行，和类组件
        中的挂载和更新的生命周期是一样的意思
        该函数中还可以设置一个返回值，返回值会在 useEffect 下一次执行前执行
        在这个里面我们可以做副作用的清除。

        第二个参数：
    */

    // useEffect(() => {
    //     fetch('http://121.89.205.189:3000/api/banner/list')
    //         .then(res => res.json())
    //         .then(res => {
    //             console.log(res.data);
    //             setBanner(res.data)
    //         })
    // }, [])
    /*
            第二个参数是依赖参数，如果不配置依赖参数，那么会导致当前
            useEffect 重新执行，因为 banner 改变之后会监听到数据
            变化，只要数据有发生变化那么 useEffect 就会重新执行，导致
            死循环，所以如果我们执行想在挂载阶段做请求，那么我们要设置
            一个空的依赖。
        */


    // ------------ 配置依赖
    const [count, setCount] = useState(100)
    // useEffect(() => {
    //     fetch('http://121.89.205.189:3000/api/banner/list')
    //         .then(res => res.json())
    //         .then(res => {
    //             console.log(res.data);
    //             setBanner(res.data)
    //         })
    // }, [count])
    /*
     该 useEffect 有配置一个依赖参数，只要依赖发生改变就会立即执行一次 useEffect
     依赖可以设置多个，如果添加多个依赖，那么只要有其中一个发生变化，那么就会重新执行
     useEffect
     被添加依赖的 useEffect 可以理解 vue 中的侦听器和计算属性的功能，可以监听到值的变化
    */

    // ------------ 清除副作用
    // 一个组件中可以添加多个 useEffect
    useEffect(() => {
        console.log(111111111);

        const a = setInterval(() => {
            setCount(count + 1)
        }, 1000);

        return () => {

            clearInterval(a)

            // 该函数会在下一次执行 useEffect 之前执行
            // 在这里可以清除副作用，一些异步的操作可以叫做副作用
            // 如定时器，即时通讯的长连接
            console.log(55555555);
        }
    }, [count])
    useEffect(() => {
        console.log(22222222);
    }, [count])
    useEffect(() => {
        console.log(33333333);
    }, [count])
    useEffect(() => {
        console.log(4444444444);
    }, [count])


    return (
        <div>
            <h1>{count}</h1>
            <button onClick={() => {
                setCount(count + 1)
            }} >点击增加</button>
            {banner.map(item => {
                return <img style={{ width: 100 }} key={item.bannerid} src={item.img} />
            })}
        </div>
    )
}
